<template>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div class="clearfix box-header">
            <svg-icon icon-class="ds-person" /><span>不良记录</span>
          </div>
          <div class="log-list">
            <div class="log-item" v-for="(item, index) in list" v-bind:key="index">
              <div class="log-title">
                <span>{{item.insert_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
                <span>{{item.insert_uid_text}}</span>
              </div>
              <div class="log-content">{{item.r_content}}</div>
            </div>
          </div>
          <el-button class="filter-item" type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd()">新增</el-button>
        </el-card>
      </el-col>
      <el-dialog width="30%" :title="'新增不良记录'" :visible.sync="dialogFormVisible" :show-close="false">
        <el-form :rules="rules" status-icon ref="dataForm" :model="temp" label-position="left" label-width="70px" style='width: 80%; margin-left:50px;'>
          <el-form-item label="记录人">
            {{name}}
          </el-form-item>
          <el-form-item label="记录详情" prop="r_content">
            <el-input type="textarea" resize="none" placeholder="请输入新增记录内容" style="width: 100%;" v-model="temp.r_content" :maxlength="500"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="addData">确认</el-button>
        </div>
      </el-dialog>
    </el-row>
</template>

<style scoped>
  .el-textarea__inner {
    height: 120px;
  }
  .log-list {
    max-height: 400px;
    overflow: auto;
    background-color: #fafafa;
    margin-bottom: 10px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-carousel__item {
    background-color: #d3dce6;
  }
	.el-form-item__content a {
		color: #ed8a94;
		float: right;
	}
  .el-form-item__content a:hover {
    text-decoration: underline;
  }
  .el-card .el-form-item {
    margin-bottom: 0px;
  }
  .el-col .el-card__header {
  	border-bottom:0 !important;
  }
  .el-col > div.el-card:nth-child(1){
  	border-left: 4px solid #3fb2fe;
  }
  .box-card {
    margin-top: 0px;
    height: 540px;
  }
  .box-header svg {
    font-size: 20px;
    margin-right: 10px;
  }
  .box-header {
    padding: 10px 0;
    font-weight: bold;
    color: #858585;
  }
  .log-item {
    padding: 10px 20px;
  }
  .log-title {
    line-height: 40px;
  }
  .log-title span {
    font-size: 14px;
  }
  .log-title span:first-child {
    color: #999999;
  }
  .log-title span:last-child {
    color: #4d4d4d;
    float: right;
  }
  .log-content {
    font-size: 14px;
    border-bottom: solid 1px #dcdcdc;
    border-radius: 5px;
    background-color: #e6e6e6;
    padding: 10px;
    line-height: 24px;
  }
</style>
<script>
import { mapGetters } from 'vuex'
import { fetchList, addData } from '@/api/badlogs'
export default {
  props: {
    info: Object,
    path: String
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    // 数据校验
    const checkLogInfo = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('记录详情不能为空'))
      } else if (value.length > 500) {
        return callback(new Error('记录详情不能大于500'))
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      param: this.$route.params,
      temp: {
        oid: this.$route.params.id,
        r_content: ''
      },
      list: [],
      data: {
        oid: this.$route.params.id,
        'per-page': 1000
      },
      rules: {
        r_content: [{ validator: checkLogInfo, trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    resetTemp() {
      this.temp = {
        r_content: ''
      }
    },
    cancel() { // 取消弹框
      this.dialogFormVisible = false
      this.temp.r_content = ''
      this.$refs['dataForm'].clearValidate()
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    addData() {
      addData(this.temp).then(response => {
        this.$message({
          message: '操作成功',
          type: 'success',
          onClose: () => {
            this.$router.push(this.path)
          }
        })
      })
    },
    getList() {
      fetchList(this.data).then(response => {
        this.list = response.data.data
      })
    }
  }
}
</script>
